<template>
	<view>
		<view class="iconfont">&#xe643;</view>
		<view class="membertop">
			<view class="left">
			<view class="avatar"></view>
			<view>一个淘宝新人</view>
			</view>
			<view class="right">
				<view>团队</view>
				<view>0</view> 
			</view>
		</view>
		<!--提现-->
		<view class="column-box">
			<view class="title">
				<view class="left">
					<text class="iconfont">&#xe643;</text>
					<view>提现中心</view>
				</view>
				<view class="right">查看更多></view>
			</view>
			<view class="content">
				<view class="box-line"></view>
				<view class="box-item">
					<view>预估提现金额</view>
					<view class="money">¥ 0.00</view>
					<view class="button">去提现</view>
				</view>
				<view class="box-item">
					<view>已提现金额</view>
					<view class="money">¥ 0.00</view>
					<view class="button">去赚钱</view>
				</view>
			</view>
		</view>
		<!--返利订单-->
		<view class="column-box">
			<view class="title">
				<view class="left">
					<view class="iconfont">&#xe622;</view>
					<view>返利订单</view>
				</view>
				<view class="right">查看更多></view>
			</view>
			<view class="content">
				<view class="box-line"></view>
				<view class="box-item">
					<view>预估提现订单</view>
					<view class="money">0</view>
				</view>
				<view class="box-item">
					<view>已提现金额</view>
					<view class="money">0</view>
				</view>
			</view>
			<view class="order-center">进入订单中心</view>
		</view>
		<!--我的团队-->
		<view class="column-box">
			<view class="title">
				<view class="left">
					<text class="iconfont">&#xe622;</text>
					<view>我的团队</view>
				</view>
				<view class="right">查看更多></view>
			</view>
			<view class="content">
				<view class="box-line"></view>
				<view class="box-item">
					<view>直属团队</view>
					<view class="money">0</view>
				</view>
				<view class="box-item">
					<view>下属团队</view>
					<view class="money">0</view>
				</view>
			</view>
			
		</view>
		<!--我的工具-->
		<view class="column-box">
			<view class="title">
				<view class="left">
					<text class="iconfont">&#xe622;</text>
					<view>我的工具</view>
				</view>
			
			</view>
			<view class="content">
				<view class="icon-box">
					<view class="appicon">
						<text class="iconfont">&#xe899;</text>
						<view>查券教程</view>
					</view>
				</view>
				
			</view>
		
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.column-box{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 95%;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #707070;
		background-color: #fff;
		padding: 10rpx 0;
		border: 1rpx solid #f0f0f0;
		margin: 20rpx auto;
		.order-center{
			margin: 10rpx auto;
			padding: 10rpx ;
			width: 80%;
			border-radius: 10rpx;
			border: 1rpx solid #f0f0f0;
			display: flex;
			align-content: center;
			justify-content: center;
		}
		.content{
			display: flex;
			align-items: center;
			justify-content: space-around;
			color: #9e9e9e;
			font-size: 25rpx;
			width: 95%;
			padding: 10rpx 0;
			margin: 0 auto;
			position: relative;
			.icon-box{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				
				.appicon{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					.text{
						margin: 10rpx 0;
					}
				}
			}
			.box-line{
				position: absolute;
				height: 100rpx;
				width: 1rpx;
				background-color: #f0f0f0;
				left: 350rpx;
				top: 20rpx;
			}
			.box-item{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				
				.money{
					color: #e93340;
					font-size: 32rpx;
					font-weight: bold;
					margin: 20rpx 0;
				}
				.button{
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					border-radius: 10rpx;
					width: 250rpx;
					height: 75rpx;
					background: linear-gradient(left,#fc5c3d 10%,#e93340 90%);
				}
			}
			
		}
		.title{
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx auto;
			margin-bottom: 30rpx;
			padding: 10rpx 0;
			border-bottom:1rpx solid #f0f0f0 ;
			.left{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.right{
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
	}
	.membertop{
		width: 90%;
		height: 120rpx;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		font-size: 28rpx;
		background-color: #e93340;
		color: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		.left{
			display: flex;
			justify-content: center;
			align-items: center;
			.avatar{
				border-radius: 50%;
				width: 80rpx;
				height: 80rpx;
				background-color: #fff;
				margin-right: 20rpx;
			}
			
		}
		.right{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
	}
</style>
